<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/Timo">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
</head>
<body>
<div class="layui-form timo-compile">
    <form th:action="@{/mains/expandCh/save}" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label required">渠道名</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="channelName" placeholder="请输入渠道名" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">推广路径</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="exUrl" placeholder="请输入推广路径" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">渠道编号</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="ch" placeholder="请输入渠道编号" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">位置</label>
            <div class="layui-input-inline">
                <select name="type" lay-verify="required" id="kinds">
                    <option value="top">顶层</option>
                    <option value="enter">开屏</option>
                    <option value="banner">banner</option>
                    <option value="low">底部</option>
                    <option value="icon">icon</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item timo-finally">
            <button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i> 保存</button>
            <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
        </div>
    </form>
</div>
<script th:replace="/common/template :: script"></script>
<script type="text/javascript" th:src="@{/js/plugins/jquery-3.3.1.min.js}"></script>
<script type="text/javascript">
    // 树形菜单
    layui.use(['form','upload'],function () {
        var form = layui.form, upload = layui.upload;
        $("form").on("click",function(){
            var kinds = $('input[name="states"]:checked').val();

        });//

        form.on('select(forwards)',function(data){
            var forwards = data.value;
            if(forwards==1){
                // $("#noDisplay").hide();
                $(".forwardT").show()
            } else {
                // $("#noDisplay").show();
                $(".forwardT").hide();
            }
        });

        form.on('select(kinds)',function(data){
            var kinds = data.value;
            if(kinds==1){
                $(".imgLinks").val("pages/login/login")
            } else {
                $(".imgLinks").val("http://www.baidu.com");
            }
        });




        var maxPicUP = upload.render({
            elem: '#maxPic'
            ,url: '/mains/banner/upload'
            ,field: 'image' //文件域的字段名
            ,acceptMime: 'image/*' //选择文件类型
            ,exts: 'jpg|jpeg|png|gif' //支持的图片格式
            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load('图片正在上传中，请稍后......',{icon: 16,time:false,shade:0.8}); //上传loading
            }
            ,choose: function (obj) {
                obj.preview(function (index, file, result) {
                    var upload = $('#maxPic');
                    var show = upload.parents('.layui-form-item').children('#max-show');
                    show.append("<div class='upload-item'><img src='"+ result +"'/>" +
                        "<i class='upload-item-close layui-icon layui-icon-close'></i></div>");
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code ==400){
                    layer.closeAll('loading'); //关闭loading
                    return layer.msg('上传失败');
                }
                layer.closeAll('loading'); //关闭loading
                console.log(res.data)
                $("#maxPicName").val(res.data);
                //上传成功

            }
            ,error: function(index, upload){
                layer.closeAll('loading');
                return layer.msg('上传失败');
            }
        });
    })
</script>
</body>
</html>
